import * as obj from "../public.js";
const o = obj.default;


const imgs = [...o.$$('img')]
imgs.forEach((val)=>{
  val.className = 'lazy'
  const data = val.src
  val.src = '';
  val.dataset.src = `${data}`
})
// console.log(imgs[0])
// console.log(imgs[1])


// const lazy = Array.from(o.$(".lazy").children);

// 初始判断图片是否在可视区域内，在，加载
lazyImg(imgs, 0);

onscroll = function(){
  // 滚动过程中，不断判断图片是否在可视区域内，在，加载
  const scrollT = document.documentElement.scrollTop;
  lazyImg(imgs, scrollT);
}

function lazyImg(ele, scrollT){
  const clientH = document.documentElement.clientHeight;
  for(let i=0;i<ele.length;i++){
    // 滚动的距离 + 浏览器可视区域高度 > 图片距离页面顶端的距离
    if(scrollT + clientH > ele[i].offsetTop){
      // 加载图片
      ele[i].src = ele[i].dataset.src;
      // 从数组中删除已加载的图片
      ele.splice(i, 1);
      // 同步索引
      i--;
    }
  }
}